<template>
  <swiper :pagination="true" :modules="modules" class="mySwiper" loop :autoplay="{
    delay: 2500,
    disableOnInteraction: false,
  }">
    <swiper-slide v-for="item in list">
      <el-image style="width:100%;height: 100%;" :src="item.image" fit="fit" />
    </swiper-slide>
  </swiper>
</template>
<script setup>
//swiper 初始化
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination';
import { Pagination, Autoplay } from 'swiper/modules';
const modules = [Pagination, Autoplay]

import { onMounted, ref } from 'vue';
import { useTabbarStore } from '@/stores/TabbarStore'
import { getBanners } from '@/apis/apis'
const tabbarStore = useTabbarStore()
const list = ref([])
onMounted(async () => {
  let res = await getBanners()
  list.value = tabbarStore.page == 'store' ? res.store : res.house
  // console.log('res', res)
})

</script>

<style scoped>
.swiper {
  width: 100vw;
  background-color: rebeccapurple;
  height: 40vw;
}


.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
